<template>
  <view class="page-container">
    <uni-ele-form :fields="formFields" :rules="rules" :source="item" labelWidth="200px" @submit="submit"></uni-ele-form>
  </view>
</template>
<script>
import {mapState} from 'vuex';
import {modifypwd} from '@/common/services/user.js';

export default {
  data() {
    return {
      item: {},
      formFields: [
        {
          title: '用户名:',
          valueType: 'text',
          value: 'username',
          width: '250px'
        },
        {
          title: '姓名',
          valueType: 'text',
          value: 'name',
          width: '250px'
        },
        {
          title: '旧密码',
          valueType: 'password',
          value: 'oldPassword',
          width: '250px'
        },
        {
          title: '密码',
          valueType: 'password',
          value: 'password',
          width: '250px'
        },
        {
          title: '确认密码',
          valueType: 'password',
          value: 'confirmPassword',
          width: '250px',
          confirmValue: 'password'
        }
      ],
      rules: {
        oldPassword: [
          {
            required: true,
            message: '请输入当前登录密码',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            pattern: /^.*(?=.{6,20})[_a-zA-Z0-9]+$/,
            message: '密码6~20位，由英文字母，数字以及下划线组成',
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value != this.item.form.password) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            }
          }
        ]
      }
    };
  },
  onLoad() {
    this.item = {
      username: this.userInfo.username,
      name: this.userInfo.name
    };
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    submit(e) {
      let that = this;
      let param = {
        rawPass: e.oldPassword,
        newPass: e.password
      };
      modifypwd(param).then(ret => {
        that.$utils.notify('保存成功');
      });
    }
  }
};
</script>
<style lang="scss" scoped></style>
